<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      <div class="renwu-title">
        <div>
          <i class="iconfont iconfile-text-fill color-span title-span"></i>
          <span :class="['title-span',activeTitle === key?'isActive':'']"
                @click="activeTitle = key"
                v-for="(item,key,index) in rw"
                :key="index">{{key}}</span>
        </div>
        <el-button type="text"
                   v-if="activeTitle === firstKey"
                   @click="getPlatformComponentsPath($router, `/projectManage/myTask/index-15&prefix=/ps_html&name=我的任务`)">查看更多</el-button>
      </div>
    </template>
    <template slot="content">
      <el-tabs>
        <el-tab-pane :label="key"
                     v-for="(item,key,index) in rw[activeTitle]"
                     :key="index">
          <template v-if="item.length > 0">
            <div v-for="(subItem,index) in item"
                 :key="index"
                 class="renwu-warp">
              <span @click="goDetail(subItem)">
                <span>【{{subItem.projectName}}】{{subItem.taskName}}</span>
                <span :style="{background:subItem.stateCode === 'on_process'?'#4FBD77':subItem.stateCode === 'no_start'?'#FF8B61':'#FFAA00'}">{{subItem.taskProgress}}%</span>
              </span>
              <span>{{subItem.createTime.substr(0,10)}}</span>
            </div>
          </template>
          <div class="no-data"
               v-else>
            <img src=""
                 alt="">
            <span>暂无数据</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { getPlatformComponentsPath } from '../../util/util'
import { getTasktodo } from './config'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      firstKey: '',
      activeTitle: 0,
      rw: []
    }
  },
  methods: {
    goDetail (subItem) {
      if (!subItem.routerUrl) return
      getPlatformComponentsPath(this.$router, subItem.routerUrl.indexOf('?') !== -1 ? subItem.routerUrl + '&prefix=' + subItem.routePrefixFront : subItem.routerUrl + '?prefix=' + subItem.routePrefixFront)
    },
    getData () {
      getTasktodo().then(res => {
        this.rw = res.data.data
        for (const k in res.data.data)
          if (!this.activeTitle) {
            this.firstKey = k
            this.activeTitle = k
          }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    margin-bottom: 10px;
  }
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    height: calc(100% - 55px);
    .el-tab-pane {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.renwu {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        margin-left: 5px;
        margin-right: 20px;
        cursor: pointer;
        color: #b3b3b3;
      }
      &:nth-child(3) {
        cursor: pointer;
        color: #b3b3b3;
      }
    }
    .isActive {
      font-weight: bold;
      color: #333 !important;
    }
  }
  &-warp {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #ebebeb;
    & > span:nth-child(1) {
      width: calc(100% - 150px);
      overflow: hidden;
      text-align: left;
      color: #808080;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      & > span:nth-child(1) {
        max-width: calc(100% - 100px);
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.7;
      }
      & > span:nth-child(2) {
        position: relative;
        margin-left: 5px;
        padding: 2px 7px;
        color: #fff;
        border-radius: 3px;
      }
    }
    & > span:nth-child(2) {
      width: 100px;
      text-align: right;
      color: #999;
    }
  }
}
</style>